<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增项目')" />
	<th:block th:include="include :: summernote-css" />
	<th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-projects-add">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">名称：</label>
                    <div class="col-sm-8">
                        <input name="name" id="project_name" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">描述：</label>
                   <!-- <div class="col-sm-8">
                    </div>-->
					<div class="col-sm-8">
                        <input name="description" id="description" type="hidden">
				        <div class="ibox-content no-padding">
				            <div class="summernote" id="project_description"></div>
						</div>
					</div>
                </div>
            </div>
				<div class="col-xs-12">
				    <div class="form-group">
				        <label class="col-sm-3 control-label is-required">标识：</label>
				        <div class="col-sm-8">
				            <input maxlength="100" name="identifier" class="form-control" id="project_identifier" type="text" required>
							<span class="help-block m-b-none">长度必须在 1 到 100 个字符之间。 仅小写字母（a-z）、数字、破折号（-）和下划线（_）可以使用。
							一旦保存，标识无法修改。</span>
				        </div>
				    </div>
				</div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目主页：</label>
                    <div class="col-sm-8">
                        <input name="homepage" class="form-control" type="text">
                    </div>
                </div>
            </div>
			<div class="col-xs-12">
			    <div class="form-group">
			        <label class="col-sm-3 control-label">上级项目：</label>
			        <div class="col-sm-8">
					    <select class="form-control select2-multiple" name="parentId" id="parentId">
							<option th:each="p:${projectsList}" th:value="${p.id}" th:text="${p.name}"></option>
					    </select>
			        </div>
			    </div>
			</div>
			<div class="col-xs-12">
			    <div class="form-group">
			        <label class="col-sm-3 control-label">继承父项目成员：</label>
			        <div class="col-sm-8">
						<div class="checkbox check-box">
						    <label><input type="checkbox"name="inherit_members" id="project_inherit_members" value="1"></label>
						</div>
			        </div>
			    </div>
			</div>
			<div class="col-xs-12">
			    <div class="form-group">
			        <label class="col-sm-3 control-label">项目负责人：</label>
			        <div class="col-sm-8">
					    <input name="projectLeader" class="form-control" type="text" placeholder="请输入项目负责人姓名">
			        </div>
			    </div>
			</div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
	<th:block th:include="include :: summernote-js" />
	<th:block th:include="include :: select2-js" />
	<script th:src="@{/js/assets/project_identifier.js}"></script>
    <script th:inline="javascript">
		var prefix = ctx + "project"
		$(document).ready(function () {
		    $('.summernote').summernote({
		        lang: 'zh-CN',
				height: 160
		    });
		});
        $("#form-projects-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
				var descriptionHTML = $('#project_description').summernote('code');
				$("#description").val(descriptionHTML);
				console.log(JSON.stringify($('#form-projects-add').serializeArray()));


                $.operate.save(prefix + "/add", $('#form-projects-add').serialize());
            }
        }
		$(function() {
			$('#parentId').select2({
			    placeholder: "请选择上级项目",
			    allowClear: true
			});
		})
    </script>
</body>
</html>